<template>
  <jm-table
    :tableData="userList"
    v-bind="contentTableConfig"
    :tableCount="userCount"
    v-model:page="pageInfo"
  >
    <!-- 1.列表中的插槽 -->
    <template #state="{ row }">
      <el-button size="mini" :type="row.enable ? 'success' : 'danger'">{{
        row.enable ? '启用' : '禁用'
      }}</el-button>
    </template>
    <template #createAt="{ row }">
      <strong>{{ $filters.formatTime(row.createAt) }}</strong>
    </template>
    <template #updateAt="{ row }">
      <strong>{{ $filters.formatTime(row.updateAt) }}</strong>
    </template>
    <!-- 操作 -->
    <template #handler>
      <div>
        <el-button type="text" icon="el-icon-edit">编辑</el-button>
        <el-button type="text" icon="el-icon-delete">删除</el-button>
      </div>
    </template>

    <!-- 2.header中的插槽 -->
    <template #handerHandler>
      <el-button type="primary">新建用户</el-button>
      <!-- <el-button icon="el-icon-refresh" type="primary"></el-button> -->
    </template>
  </jm-table>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'

import { useStore } from '@/store'

import JmTable from '@/base-ui/table'

export default defineComponent({
  components: { JmTable },
  props: {
    contentTableConfig: {
      type: Object,
      require: true
    },
    pageName: {
      type: String,
      require: true
    }
  },
  setup(props) {
    const store = useStore()

    // 双向绑定pageInfo
    const pageInfo = ref({ currentPage: 0, pageSize: 10 })

    watch(
      () => pageInfo.value,
      () => {
        getPageData()
      },
      {
        deep: true
      }
    )

    const getPageData = (queryInfo: any = {}) => {
      store.dispatch('system/getPageListAction', {
        pageName: props.pageName,
        queryInfo: {
          offset: pageInfo.value.currentPage * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryInfo
        }
      })
    }

    getPageData()

    // 获取列表数据
    const userList = computed(() => store.state.system.userList)
    const userCount = computed(() => store.state.system.userCount)
    return {
      userList,
      userCount,
      pageInfo,
      getPageData
    }
  }
})
</script>

<style scoped></style>
